<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 检测浏览器是否支持某个具体的属性值
        function testValue(id, value, property) {
            var dummy = document.createElement('p');
            dummy.style[property] = value;

            if (dummy.style[property]) {
                root.createList.add(id);
                return ture;
            }

            root.classList.add('no-' + id);
            return false;
        }
    </script>

    <style>
        /* 某些值相互依赖时，应该把他们的关系用代码表示出来 */
        /* 例如下面这个CSS代码 */
        body {
            padding: 6px 16px;
            border: 1px solid #446d88;
            background-color: #58a linear-gradient(#77a0bb, #58a);
            border-radius: 4px;
            box-shadow: 0 1px 5px gray;
            color: white;
            text-shadow: 0 -1px 1px #335166;
            font-size: 20px;
            line-height: 30px;
        }

        /* 修改之后 */
        body {
            padding: .3em .8em;
            border: 1px solid #446d88;
            background-color: #58a linear-gradient(#77a0bb, #58a);
            border-radius: .2em;
            box-shadow: 0 .05em .25em gray;
            color: white;
            text-shadow: 0 -.05em .05em #335166;
            font-size: 125%;
            line-height: 1.5;
        }

        /*         
        继承 (inherit)
        inherit可以用在任何css属性中，而且它总是绑定到父元素的计算值（对为元素来收，取该伪元素的宿主元素）
        */

        /* 
        一些建议养成的编码习惯，尽量避免使用媒体查询，使代码在任何可能出现的视口尺寸下都良好工作：
        1. 使用百分比长度来取代固定宽度，实在做不到也要尝试使用
            与视口大小有关的单位（vw、vh、vmin、vmax），他们的值都解析为视口百分比
        2. 在较大分辨率下得到固定宽度时，使用 max-width 而不是 width
        3. 不要忘记为替换元素（img、object、video、iframe等）设置一个100%
        4. 如果要使背景图片铺满背景，不管容器大小如何变化，都可以使用 background-size: cover 做到
        5. 当图片或其他元素行列排布时，可以用 flex 布局让视口的宽度来决定列的数量
        6. 使用多列文本时，指定 column-width 而不是 column-count ，这样较小屏幕时显示单列
        */

        /* 
        一段有关响应式布局的话：
        我们的思路是最大努力实现可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。
        当网页本身的设计足够灵活时，让它变成响应式布局应该只需要一些简短的媒体查询代码。

        这件事情之所以这么简单，关键在于我们的整个布局原本就是弹性可伸缩的。
        因此，优化网页在小屏幕上的表现，其实只意味着把一些外边距收缩到最小程度，然后把因为屏幕
        太窄而无法显示成双列的侧栏调整为单列布局而已。

        如果你发现自己需要一大堆媒体查询才能让设计适应大大小小的屏幕，那么不妨后退一步，重新
        审视你的代码结构。因为在所有的情况下，响应式布局都不是唯一需要考虑的问题。
        */


        
        /* 
        --xx-xxx 的格式定义多次使用的值，比如
        --main-color
        --main-bg-color
        --accent-color
        */
        :root {
            --main-bg-color: coral;
            --main-txt-color: blue;
            --main-padding: 15px;
        }

        h1{
            color: black;
        }

        /* 
        var(--xx-xxx) 的格式调用已定义的值
        */
        #div1 {
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
        }

        #div2 {
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
        }

        #div3 {
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
            padding: var(--main-padding);
        }
    </style>


</head>

<body>
    <h1>var() 函数</h1>

    <div id="div1">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
    <br>

    <div id="div2">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
    <br>

    <div id="div3">菜鸟教程 - 学的不仅是技术，更是梦想！</div>
</body>

</html>